<template>
  <div class="container">

    <el-card class="box-card" v-if="!hasPaper">
      <div slot="header" class="clearfix">
        <span>公告</span>
      </div>
      <div class="text item">
        暂无试卷
      </div>
    </el-card>

    <div v-for="paper in papers" :key="paper.id">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{  paper.title  }}</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="startTest(paper.id)" v-if="paper.isShowTestBtn" :disabled="paper.isDisabled">开始考试</el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="selectInfo(paper.id)" v-if="!paper.isShowTestBtn">查看信息</el-button>
        </div>
        <div class="text item"> 开始时间: {{ paper.startTime | dateFormat }} </div>
        <div class="text item"> 截止时间: {{ paper.endTime | dateFormat }} </div>
        <div class="text item" style="color: red"> 考试状态: {{ paper.status }} </div>
      </el-card>
    </div>


  </div>
</template>

<script>
import { Confirm, Info, Success, Error, Alert } from "../../utils/element.config";
import { GetPapersAsExam, SelectPaperInfo } from "../../api/public";

export default {
  data(){
    return{
      papers: [],
      hasPaper: false
    }
  },
  created() {
    /* 获取考卷的列表 */
    GetPapersAsExam().then(result => {
      if( result.code === 200 ){

        /* 修改试卷中的时间 */
        for( let i = 0; i < result.data.length; i++ ){
          result['data'][i]['startTime'] = Date.parse(result['data'][i]['startTime']);
          result['data'][i]['endTime'] = Date.parse(result['data'][i]['endTime']);
          /* 判断考试按钮是否禁用 */
          switch (result['data'][i].status) {
            case "未开始":
              result['data'][i]['isShowTestBtn'] = true; // 考试按钮
              result['data'][i]['isDisabled'] = true; // 按钮不可用
              break;
            case "已提交":
            case "已过期":
              result['data'][i]['isShowTestBtn'] = false; // 查看信息按钮
              break;
            case "待考试":
              result['data'][i]['isShowTestBtn'] = true; // 考试按钮
              result['data'][i]['isDisabled'] = false; // 按钮可用
              break;
          }
        }
        this.papers = result.data
        this.hasPaper = true

      }else if( result.code === 300 ){
        Info(result.message)
      }
    })
  },
  methods: {
    /** 查看考试信息的按钮 **/
    selectInfo(id){
        SelectPaperInfo({id: id}).then(result => {
          if( result.code !== 500 ){
            Alert(result.message)
          }
        })
    },
    /** 开始考试的按钮 **/
    startTest(id){
      Confirm("内容模块", "考试须知").then(() => {
        Success("正在获取考试内容...")
        this.$router.push("/test/" + id)
      }).catch(() => {
        Info("取消了考试")
      })
    }
  }
}
</script>

<style scoped>
.container{
  margin-top: 20px;
  width: 1331px;
  display: flex;
  flex-wrap: wrap;
}
.text {
  font-size: 16px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-card {
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 40px;
  width: 280px;
  height: 200px;
}
</style>
